<template>
  <div class="cardContainer2" style="width: 92%">
    <div class="card2 h-62 p-2" style="width: 100%; height: 70vh; overflow-x: auto">
      <div
        class="flex items-center p-4 border-b"
        v-for="day in qweather.wl"
        :key="day"
        :ref="convertDateFormat(day.time) == jintian ? 'scrollTarget' : ''"
        :class="convertDateFormat(day.time) == jintian ? 'border-red-500' : ''"
      >
        <futureWeatherItem :day="day"></futureWeatherItem>
      </div>
    </div>
  </div>
</template>

<script setup>
import { toRefs } from 'vue';
import futureWeatherItem from './FutureWeatherItem.vue';

const jintian = convertDateFormat(`${new Date().getFullYear()}/${new Date().getMonth() + 1}/${new Date().getDate()}`);
// Define props
const props = defineProps({
  qweather: Object, // Define qweather as an object prop

  onGeticon: Function,
});

// Destructure the qweather prop
const { qweather } = toRefs(props);

function convertDateFormat(originalDate) {
  // 将原始日期拆分成年、月、日
  const [year, month, day] = originalDate.split('/');

  // 创建日期对象
  const dateObject = new Date(`${year}-${month}-${day}`);

  // 获取月份和日期，并确保为两位数
  const formattedMonth = (dateObject.getMonth() + 1).toString().padStart(2, '0');
  const formattedDay = dateObject.getDate().toString().padStart(2, '0');

  // 将转换后的日期存储到 convertedDate 变量中
  return `${formattedMonth}-${formattedDay}`;
}
provide('convertDateFormat', convertDateFormat);
</script>
<style scoped lang="less"></style>
